<template>
    <div class="chart-box" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "MapChart",
    data() {
        return {
        }
    },
    async mounted() {
        const res = await fetch('./500000_full.json')
        res.text().then(geoJson => {
            const chart = echarts.init(this.$refs.chart)
            echarts.registerMap('chongqing', JSON.parse(geoJson));
            let option = {
                series: [{
                    name: '地图数据',
                    type: 'map',
                    zoom: 1.1,
                    roam: true, //是否开启鼠标缩放和平移漫游
                    mapType: 'chongqing', // 自定义扩展图表类型
                    itemStyle: {
                        normal: {
                            borderColor: 'rgb(93, 155, 208)',
                            areaColor: 'rgb(44,114, 190)',
                            color: '#fff',
                            fontSize: 14
                        },
                    },
                    label: {//区域名样式 
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10,
                                color: '#fff'
                            }
                        },
                    },


                }]
            };
            chart.setOption(option);
            chart.on('click',  (params) => {
                this.$emit('chooseMap',params.data.name)
            });
        })
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 55%;
}
</style>